<template>
  <div>
    <el-dialog
      :title="title"
      ref="JDialog"
      :visible.sync="dialogVisible"
      append-to-body
      width="25rem"
      center
    >
      <template>
        <div class="register-panel">
          <div class="register-panel-item">
            <span>账号：</span>
            <el-input
              style="width: 80%;"
              placeholder="请输入账号"
              v-model="account"
            ></el-input>
          </div>
          <div class="register-panel-item">
            <span>密码：</span>
            <el-input
              placeholder="请输入密码"
              style="width: 80%;"
              v-model="password"
              show-password
            ></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="registerConfirm()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { config } from "../config/config";
import { removeLogin } from "../assets/js/init";
import { hex_md5 } from "../util/md5";
import { register } from "../config/api";
import { mapMutations } from "vuex";
export default {
  name: "register",
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      account: "",
      password: "",
      title: "注册"
    };
  },
  async mounted() {
    this.keyBroadListener();
  },
  methods: {
    ...mapMutations(["setJBlogLogin"]),
    async registerConfirm() {
      const res = await this.httpPost(register, {
        username: this.account,
        password: this.password
      });
      if (res.code == 1 && res.data == "注册成功") {
        this.dialogVisible = false;
        this.$message({
          message: "注册成功",
          type: "success"
        });
        // localStorage.setItem("JBlogLogin", true);
        // localStorage.setItem("JUsername", this.account);
        // localStorage.setItem("JPassword", hex_md5(this.password));
        // this.setJBlogLogin(false);
        // this.$router.go(0);
      } else {
        this.$message(res.data);
      }
    },
    keyBroadListener() {
      //   document.onkeydown = e => {
      //     //默认当点击ctl+k时登陆界面弹出
      //     if (75 == e.keyCode && e.ctrlKey) {
      //       if (!this.dialogVisible) this.dialogVisible = true;
      //       else this.dialogVisible = false;
      //     }
      //   };
    }
  }
};
</script>

<style lang="scss" scoped></style>
